<template>
  <div class="about">
    <Row class="navs slide-bck-top" >
      <Menu
        mode="horizontal"
        :theme="theme1"
        active-name="1"
        type="flex"
        justify="center"
        class="m-navs"
      >
        <Col :xs="6" :sm="6" :md="6" :lg="6">
          <MenuItem name="1" @click.native="$store.state.counter = 0">
           <Icon type="md-person" />
          </MenuItem></Col
        >
        <Col :xs="6" :sm="6" :md="6" :lg="6">
          <MenuItem name="2" @click.native="$store.state.counter = 1">
            <Icon type="ios-paper" />
          </MenuItem></Col
        >
        <Col :xs="6" :sm="6" :md="6" :lg="6">
          <MenuItem name="3" @click.native="$store.state.counter = 2">
            <Icon type="ios-briefcase" />
          </MenuItem></Col
        >
        <Col :xs="6" :sm="6" :md="6" :lg="6">
          <MenuItem name="4" @click.native="$store.state.counter = 3">
           <Icon type="ios-paper-plane" />
          </MenuItem></Col>
      </Menu>
    </Row>
    <myprofie v-show="$store.state.counter === 0"></myprofie>
    <infos v-show="$store.state.counter === 1"></infos>
    <project v-show="$store.state.counter === 2"></project>
    <contract v-show="$store.state.counter === 3"></contract>

  </div>
</template>

<script>
import myprofie from '../components/myprofie'
import infos from '../components/info'
import project from '../components/project'
import contract from '../components/contract'
export default {
  data() {
    return {
      
    }
  },
  components:{
    myprofie,
    infos,
    project,
    contract,
  }
};
</script>
<style  scoped>
.about{padding: 0 .9375rem !important;}
.ivu-menu-item{
  padding: 0;
  color: #111111 !important;
  width: 100%;
  text-align: center;
  font-size: 1.25rem;
}
.navs{
  margin-top: .625rem;
  
}
.m-navs{
background-color: #e1c03a;
border-radius: .3125rem;
}
.m-navs .ivu-menu-item-selected{
  background-color: #111111;
  color: #f4d03f !important;
  transition: all 0.6s;
}
.slide-bck-top {
  animation: slide-bck-top 0.45s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}

@keyframes slide-bck-top {
  0% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(400px) translateY(400px);
  }
  100% {
    -webkit-transform: translateZ(-400px) translateY(0px);
            transform: translateZ(0px) translateY(0px);
  }
}
</style>